@font-face {
  font-family: 'BebasNeue';
  src: url('fonts/BebasNeue-webfont.eot'),
    url('fonts/BebasNeue-webfont.woff') format('woff'),
    url('fonts/BebasNeue-webfont.ttf') format('truetype'),
    url('fonts/BebasNeue-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* CSS reset */
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset,
img {
  border: 0;
}

address,
caption,
cite,
code,
dfn,
th,
var {
  font-style: normal;
  font-weight: normal;
}

ol,
ul {
  list-style: none;
}

caption,
th {
  text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

q:before,
q:after {
  content: '';
}

abbr,
acronym {
  border: 0;
}

section,
header {
  display: block;
}

/* General Demo Style */
body {
  background: url('../images/bg.jpg');
  font-family: Calibri, Palatino, 'Palatino Linotype', 'Palatino LT STD',
    General, serif;
  font-size: 15px;
  color: #3a2127;
  font-weight: 400;
  overflow-y: scroll;
}

a {
  text-decoration: none;
  color: #333;
}

.clr {
  width: 0;
  height: 0;
  overflow: hidden;
  clear: both;
}

.container {
  width: 100%;
  height: 100%;
  text-align: center;
  position: relative;
}

.container > header {
  padding: 20px 30px 10px 30px;
  margin: 0 20px 10px 20px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

.container > header > h1 {
  font-size: 35px;
  line-height: 35px;
  font-weight: 400;
  color: rgba(26, 89, 120, 0.9);
  padding-bottom: 5px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  font-family: 'BebasNeue';
}

.container > header > h1 > span {
  color: #7cbcd6;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
}

.codrops-demos {
  padding: 14px;
}

.codrops-demos a {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  background: rgba(104, 171, 194, 0.5);
  border-radius: 50%;
  font-weight: 800;
  font-style: italic;
  color: #fff;
  margin: 0 3px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05) inset;
}

.codrops-demos a.current-demo:hover,
.codrops-demos a.current-demo {
  background: rgba(255, 255, 255, 0.9);
  color: rgba(104, 171, 194, 1);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.codrops-demos a:hover {
  background: #4fa2c4;
}

/* 页面主体 */
.cr-container {
  width: 600px;
  height: 400px;
  margin: 0 auto;
  position: relative;
  border: 20px solid #fff;
}

.cr-container input {
  display: none;
}

.cr-container label {
  font-style: italic;
  width: 150px;
  height: 30px;
  cursor: pointer;
  color: #fff;
  font-size: 24px;
  text-align: center;
  line-height: 32px;
  margin-top: 350px;
  float: left;
  position: relative;
  z-index: 1000;
}

.cr-container label:before {
  content: '';
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(130, 195, 217, 0.9);
  left: 50%;
  margin-left: -17px;
  z-index: -1;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
}

.cr-container input:checked + label {
  color: #68abc2;
}

.cr-container input:checked + label:before {
  background: #fff;
  box-shadow: 0 0 0 4px rgba(104, 171, 194, 0.6);
}

.cr-container label:after {
  content: '';
  width: 1px;
  height: 400px;
  position: absolute;
  right: 0;
  bottom: -20px;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, rgba(255, 255, 255, 0)),
    color-stop(100%, rgba(255, 255, 255, 1))
  );
  background: -moz-linear-gradient(
    top,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 100%
  );
}

.cr-container label.select-img-4:after {
  width: 0;
}

.cr-bgimg {
  width: 600px;
  height: 400px;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background-repeat: no-repeat;
}

.cr-bgimg > div {
  width: 150px;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
}

/* 在显示器分辨率低于 768px 时, 图片数字变成圆点*/
@media screen and (max-width: 768px) {
  .cr-container input {
    display: inline-block;
    width: 24%;
    position: relative;
    margin-top: 350px;
    z-index: 1000;
  }
  .cr-container label {
    display: none;
  }
}
